'use client';

import React, { useState } from 'react';
import { ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
import { GeneratedContent } from '@/types';
import { PLATFORM_MAP } from '@/constants/platforms';

interface ContentResultsProps {
  results: GeneratedContent[];
  isLoading?: boolean;
}

export function ContentResults({ results, isLoading = false }: ContentResultsProps) {
  if (isLoading) {
    return <LoadingState />;
  }

  if (results.length === 0) {
    return <EmptyState />;
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">生成结果</h3>
        <div className="text-sm text-muted-foreground">
          共生成 {results.length} 个平台内容
        </div>
      </div>
      
      <div className="grid gap-4">
        {results.map((result) => (
          <ContentResultCard key={result.platform} result={result} />
        ))}
      </div>
    </div>
  );
}

interface ContentResultCardProps {
  result: GeneratedContent;
}

function ContentResultCard({ result }: ContentResultCardProps) {
  const [copiedField, setCopiedField] = useState<string | null>(null);
  const platform = PLATFORM_MAP[result.platform];

  const copyToClipboard = async (text: string, field: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedField(field);
      setTimeout(() => setCopiedField(null), 2000);
    } catch (error) {
      console.error('复制失败:', error);
    }
  };

  const copyFullContent = async () => {
    const fullContent = `${result.title}\n\n${result.content}${
      result.hashtags ? '\n\n' + result.hashtags.map(tag => `#${tag}`).join(' ') : ''
    }`;
    await copyToClipboard(fullContent, 'full');
  };

  if (!platform) {
    return null;
  }

  return (
    <div className="result-card fade-in">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <span className="text-2xl">{platform.icon}</span>
          <div>
            <h4 className="font-semibold">{platform.name}</h4>
            <div className="text-sm text-muted-foreground">
              {result.content.length} 字 / 最大 {platform.maxLength} 字
            </div>
          </div>
        </div>
        
        <button
          onClick={copyFullContent}
          className="copy-button flex items-center gap-2"
        >
          {copiedField === 'full' ? (
            <CheckIcon className="w-4 h-4 text-green-500" />
          ) : (
            <ClipboardDocumentIcon className="w-4 h-4" />
          )}
          {copiedField === 'full' ? '已复制' : '复制全部'}
        </button>
      </div>
      
      {/* 标题部分 */}
      <div className="space-y-2 mb-4">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-muted-foreground">标题</label>
          <button
            onClick={() => copyToClipboard(result.title, 'title')}
            className="text-xs text-muted-foreground hover:text-foreground"
          >
            {copiedField === 'title' ? '已复制' : '复制'}
          </button>
        </div>
        <div className="p-3 bg-background border border-border rounded font-medium">
          {result.title}
        </div>
      </div>
      
      {/* 正文部分 */}
      <div className="space-y-2 mb-4">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-muted-foreground">正文</label>
          <button
            onClick={() => copyToClipboard(result.content, 'content')}
            className="text-xs text-muted-foreground hover:text-foreground"
          >
            {copiedField === 'content' ? '已复制' : '复制'}
          </button>
        </div>
        <div className="p-3 bg-background border border-border rounded whitespace-pre-wrap">
          {result.content}
        </div>
      </div>
      
      {/* 标签部分 */}
      {result.hashtags && result.hashtags.length > 0 && (
        <div className="space-y-2 mb-4">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-muted-foreground">相关标签</label>
            <button
              onClick={() => copyToClipboard(
                result.hashtags!.map(tag => `#${tag}`).join(' '), 
                'hashtags'
              )}
              className="text-xs text-muted-foreground hover:text-foreground"
            >
              {copiedField === 'hashtags' ? '已复制' : '复制'}
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {result.hashtags.map((tag, index) => (
              <span
                key={index}
                className="px-2 py-1 bg-primary/10 text-primary rounded-full text-sm"
              >
                #{tag}
              </span>
            ))}
          </div>
        </div>
      )}
      
      {/* 平台特色 */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-muted-foreground">平台特色</label>
        <div className="flex flex-wrap gap-2">
          {platform.features.map((feature) => (
            <span
              key={feature}
              className="px-2 py-1 bg-secondary text-secondary-foreground rounded text-sm"
            >
              {feature}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function LoadingState() {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">正在生成内容...</h3>
      <div className="grid gap-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="result-card">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-8 bg-secondary rounded animate-pulse"></div>
              <div className="space-y-2 flex-1">
                <div className="h-4 bg-secondary rounded animate-pulse"></div>
                <div className="h-3 bg-secondary rounded animate-pulse w-1/3"></div>
              </div>
            </div>
            <div className="space-y-3">
              <div className="h-4 bg-secondary rounded animate-pulse"></div>
              <div className="h-20 bg-secondary rounded animate-pulse"></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EmptyState() {
  return (
    <div className="text-center py-12 text-muted-foreground">
      <div className="text-4xl mb-4">📝</div>
      <h3 className="text-lg font-medium mb-2">还没有生成任何内容</h3>
      <p className="text-sm">输入原始内容并选择平台后，点击生成按钮开始创作</p>
    </div>
  );
}